<template>
  <Nav_bar :title="'提现'" :right_text="'历史记录'" @clickRight="$router.push('/historyCash')" />
  <div class="ivestorCashBox">
    <div class="cashBox">
      <div class="totalAmountBox" @click.stop="$router.push('/ledgerDetails')">
        <span>分账总金额（元）</span>
        <span class="total_price">¥{{ Number(amountsObj.totalAmount).toFixed(2) || '0' }}</span>
      </div>
      <div class="processBox">
        <div class="waiting">
          <span>待结算金额 (元)</span>
          <span class="_price">¥{{ amountsObj.blockingAmount || '0' }}</span>
        </div>
        <div class="waiting">
          <span>可提现总金额 (元)</span>
          <span class="_price">¥{{ amountsObj.cashAmount || '0' }}</span>
        </div>
        <div class="inBox">
          <span>审核中 (元)</span>
          <span class="_price">¥{{ amountsObj.auditAmount || '0' }}</span>
        </div>
        <div class="already">
          <span>已提现金额 (元)</span>
          <span class="_price">¥{{ amountsObj.withdrewCashAmount || '0' }}</span>
        </div>
      </div>
      <div class="cashButton">
        <!--  
           @click="
            $router.push({
              path: '/ivestorCashTwoPage',
              query: { cashAmount: amountsObj.cashAmount },
            })
          "
         -->
        <!-- <van-button
          class="_button"
          :disabled="disabled_cash"
          @click="
            $router.push({
              path: '/ivestorCashTwoPage',
              query: { cashAmount: amountsObj.cashAmount },
            })
          "
          type="default"
          block
          >提现</van-button
        > -->
      </div>
    </div>
  </div>
  <!-- @click="$router.push('/cashRule')" -->
  <button class="withdrawal_rule" @click="$router.push('/cashRule')">提现规则</button>

  <Tabbar />
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getCashSummaryApi } from '@/api/ivestorCash/ivestorCash'
const $router = useRouter()
const disabled_cash = ref(false)
const amountsObj = ref({
  totalAmount: '',
  blockingAmount: '',
  cashAmount: '',
  auditAmount: '',
  withdrewCashAmount: '',
})

/** 获取用户可以提现的额度 */
const cashSummary = async () => {
  try {
    const res = await getCashSummaryApi()
    console.log(res)
    amountsObj.value.totalAmount =
      res.data.frozenMoney +
      res.data.balance +
      res.data.auditWithdrawnMoney +
      res.data.withdrawnMoney
    amountsObj.value.blockingAmount = res.data.frozenMoney
    amountsObj.value.cashAmount = res.data.balance
    amountsObj.value.auditAmount = res.data.auditWithdrawnMoney
    amountsObj.value.withdrewCashAmount = res.data.withdrawnMoney
  } catch (error) {}
}
cashSummary()
</script>

<style lang="scss" scoped>
.ivestorCashBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  .cashBox {
    height: 271px;
    width: 347px;
    border-radius: 3px;
    background: #fff;
    .totalAmountBox {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 97px;
      border-bottom: 1px solid #eee;
      font-size: 12px;
      .total_price {
        margin-top: 19px;
        color: #c80000;
        font-size: 28px;
      }
    }

    .processBox {
      display: flex;
      justify-content: space-between;
      height: 94px;
      align-items: center;
      border-bottom: 1px solid #eee;
      .waiting,
      .inBox,
      .already {
        display: flex;
        flex-direction: column;
        width: 116px;
        border-right: 1px solid #eee;
        text-align: center;
        font-size: 10px;
        color: #999;
        box-sizing: border-box;
        ._price {
          margin-top: 17px;
          font-size: 12px;
          color: #666;
        }
      }
      .already {
        border-right: 0;
      }
    }
    .cashButton {
      display: flex;
      justify-content: center;
      align-items: center;
      ._button {
        margin-top: 18px;
        width: 298px;
        height: 40px;
        border-radius: 3px;
        background: linear-gradient(90deg, #67e0bc 0%, #14c691 100%);
        color: #fff;
        font-size: 16px;
        font-weight: 600;
      }
    }
  }
}
.withdrawal_rule {
  position: fixed;
  left: 50%;
  bottom: 99px;
  transform: translate(-50%, 0);
  font-size: 12px;
  color: #11c58f;
  background-color: transparent;
}
</style>
